<template>
	<view>
		<u-sticky bgColor="#fff">
			<view class="tabWp">
				<view class="tabItem" v-for="(item,i) in tabsList" :key="i" @click="handleTabItem(i)"
					:class="activityIndex==i?'activityItem':''">
					<view class="title">
						{{item.name}}
					</view>
				</view>
			</view>
		</u-sticky>
		<view class="listWp">
			<view class="item" v-for="(item,i) in list" :key="i">
				<view class="textWp">
					{{item.text}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				activityIndex: 0,
				tabsList: [{
						name: 'tabs1'
					},
					{
						name: 'tabs2'
					}
				],
				list: [{
						id: 1,
						text: 'sdfsdfsd'
					},
					{
						id: 2,
						text: 'srty34ts'
					},
					{
						id: 3,
						text: 'ghjkylkbv'
					}, {
						id: 4,
						text: '856hfgsrrdfgf'
					}
				]
			};
		},
		computed: {
			...mapGetters(['userInfo']),
		},
		onLoad(opt) {
			console.log(opt, 'onload');
		},
		onShow() {

		},
		watch: {
			activityIndex(val) {
				if (val == 0) {
					this.resetList()
				} else {
					this.resetList()
				}
			}
		},
		onReady() {},
		onReachBottom() {
			if (this.total <= this.pageNo * this.pageSize) {
				uni.showToast({
					title: '没有更多数据',
					icon: 'none'
				})
				return
			} else {
				this.pageNo++
				this.queryList()
			}

		},
		//下拉刷新状态
		onPullDownRefresh() {
			this.resetList()
		},
		methods: {
			handleTabItem(i) {
				this.activityIndex = i
			},
			resetList() {
				uni.showLoading({
					title: '加载中'
				})
				this.list = []
				this.total = 0
				this.pageNo = 1
				this.queryList()
			},
			async queryList() {
				uni.showLoading({
					title: '加载中'
				})
				let payload = {

				}
				// let res = await this.$api.queryPastGroupPage(payload)
				if (res.success && res.result.records.length > 0) {
					console.log(res.result.records);
					this.list = [...this.list, ...res.result.records]
					this.total = res.result.total
				} else {
					uni.showToast({
						title: '未查询到相应数据',
						icon: 'none'
					});
					this.list = []
					this.total = 0
				}
				uni.hideLoading()
				uni.stopPullDownRefresh()
			}
		}
	}
</script>

<style lang="scss">
	.tabWp {
		margin: 0 auto;
		padding: 0 40upx;
		background: #FFFFFF;
		border-radius: 20upx;
		display: flex;
		justify-content: space-evenly;
		align-items: center;

		.tabItem {
			flex: 1;
			text-align: center;
			margin: 14upx 0;
			border-radius: 20upx;

			.title {
				font-size: 30upx;
				font-weight: 400;
				padding: 22upx;
			}
		}

		.activityItem {
			background-color: #423BFE;
			color: #FFFFFF;
		}
	}
</style>
